<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心</title>
    <link rel="stylesheet" href="../css/personal.css">
    <link rel="stylesheet" href="../css/font.css">
</head>

<body>
    <div class="bigBox clear">
        <!-- 头部导航 -->
        <div class="header clear">
            <div class="w1200 clear">
                <div class="logo clear">
                    <a href="#">
                        <img src="../imgs/logo.png" alt="">
                    </a>
                </div>
                <div class="nav clear">
                    <ul>
                        <li><a href="../html/index.html">首页</a></li>
                        <li><a href="#"> 关于我们</a></li>
                        <li><a href="#">个人中心</a></li>
                        <li><a href="#">VIP特权</a></li>
                        <li><a href="#">客服中心</a></li>
                        <li><a href="#">充值中心</a></li>
                        <li><a href="#">玩家社区</a></li>
                    </ul>
                </div>
                <a href="#" id="menu" class="menu">
                    <span>游戏</span>
                    <span class="iconfont icon-liebiao" id="icon-liebiao" style="display: inline-block;"></span>
                    <span class="iconfont icon-cuo" id="icon-cuo" style="display: none;"></span>
                </a>
                <div id="topMenu" class="topMenu" style="display: none;">
                    <p>游戏列表</p>
                    <div class="menu_box_con menu_box_con1">
                        <h2 class="menu_con_title"><em>经典武侠</em></h2>
                        <div class="menu_list_box">
                            <ul>
                                <li><a target="_blank" href="http://mz.8yx.com/">密传</a></li>
                                <li><a target="_blank" href="http://fy.8yx.com"> 新风云</a><em class="icon-N"></em></li>
                                <li><a target="_blank" href="http://do.8yx.com">武林外史</a><em class="icon-N"></em></li>
                                <li><a target="_blank" href="http://gfyx.8yx.com">功夫英雄</a><em class="icon-N"></em></li>
                                <li><a target="_blank" href="http://xlx.8yx.com">新流星搜剑录</a><em class="icon-N"></em></li>
                            </ul>
                        </div>
                    </div>
                    <div class="menu_box_con menu_box_con2">
                        <h2 class="menu_con_title"><em>卡通休闲</em></h2>
                        <div class="menu_list_box">
                            <ul>
                                <li><a target="_blank" href="#">生肖传说</a></li>
                                <li><a target="_blank" href="#">地城之光</a><em
                                        class="icon-N"></em></li>
                            </ul>
                        </div>
                    </div>



                    <div class="menu_box_con menu_box_con3">
                        <h2 class="menu_con_title"><em>西方魔幻</em></h2>
                        <div class="menu_list_box">
                            <ul>
                                <li><a target="_blank" href="#">神泣</a><em class="icon-H"></em></li>
                                <li><a target="_blank" href="#">魔界</a><em class="icon-H"></em></li>
                                <li><a target="_blank" href="#">神泣5.0</a><em
                                        class="icon-N"></em></li>
                                <li><a target="_blank" href="#">神鬼世界</a><em class="icon-N"></em></li>
                            </ul>
                        </div>
                    </div>


                    <div class="menu_box_con menu_box_con4">
                        <h2 class="menu_con_title"><em>热血竞技</em></h2>
                        <div class="menu_list_box">
                            <ul>
                                <li><a target="_blank" hre="#">梦幻龙族2</a><em class="icon-H"></em>
                                </li>
                                <li><a target="_blank" href="#">功夫小子</a><em class="icon-N"></em></li>
                                <li><a target="_blank" hre="#">特种部队</a></li>
                                <li><a target="_blank" href="#">风暴战区</a><em class="icon-N"></em></li>
                            </ul>
                        </div>
                    </div>
                    <div class="menu_box_con menu_box_con5">
                        <h2 class="menu_con_title"><em>东方仙侠</em></h2>
                        <div class="menu_list_box">
                            <ul>
                                <li><a target="_blank" href="#">口袋西游</a><em class="icon-H"></em></li>
                                <li><a target="_blank" href="#">仙界传Ⅱ</a><em class="icon-H"></em></li>
                                <li><a target="_blank" href="#">圣王</a><em class="icon-N"></em></li>
                                <li><a target="_blank" href="#">降龙之剑</a><em class="icon-N"></em></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 主题内容 -->
        <div class="bg">
            <div class="bg1200">
                <div class="bg_img">
                    <img src="../imgs/login_01.png" alt="">
                </div>
                <!-- 登录表单验证 -->
                <div class="bg_box">
                    <form action="#" id="loginForm">
                        <div class="login_tap">用户登录</div>
                        <div class="login_input">
                            <span class="iconfont icon-yonghu"></span>
                            <input type="text" placeholder="输入账号"id="username" name='username' minlength="3" required pattern="^[a-zA-Z0-9_]{3,16}$" title="用户名由字母数字组成" >
                        </div>
                        <div class="login_input">
                            <span class="iconfont icon-mima"></span>
                            <input type="password" placeholder="输入密码" id="password" name='password' required pattern="^[a-zA-Z0-9_]{6,20}$" title="密码长度6-20">
                        </div>
                        <div class="login_code_box">
                            <div class="login_code">
                                <input type="text" name="login_code" id="login_code" placeholder="请输入验证码" required  pattern="^[a-zA-Z0-9_]{4}$" title="验证码4位">
                                

                            </div>
                            <canvas id="canvas" >
                                该浏览器不支持canvas，破东西快换了
                            </canvas>
                            <p id="msg"></p>
                        <!-- <img src="" alt="" title="看不清？单击此处刷新" class="login_code_img" > -->
                        </div>
                        <div class="login_box">
                            <p>
                                <span>
                                    <input type="checkbox" name="" id=" " class="forget">
                                    记住用户名
                                </span>
                                <a href="#" class="fpassword" style="color: #555;" >忘记密码？</a>
                            </p>
                        </div>
                        <div class="login_box">
                            <a href="#" class="dl" onclick="">
                                <input type="submit" value="登录" id="login_btn">
                               
                            </a>
                        </div>
                        <div class="login_box">
                            <a href="#" class="zc">
                                <input type="button" value="注册">
                                
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div class="footer clear">
        <div class="wf1200">
            <div class="flogo"><img src="../imgs/flogo.png"></div>
            <div class="finfo">
                <div class="fnav"><a href="#" style="margin-left: 0px;">关于创天</a>｜<a href="http://www.8yx.com/News/agre.html">用户协议</a>｜<a href="#">家长监护</a>｜<a href="#">封号规则</a>｜<a href="#">联系我们</a> </div>
                <p>版权所有：西安创天网络科技有限责任公司 陕ICP备16013213号-2 陕ICP备16013213号-3 网络文化经营许可证：陕网文[2017]1049-001号</p>
                <p>增值电信业务经营许可证：陕B2-20180053 举报邮箱：kf@8yx.com  平台官网：www.9vf.com www.8yx.com</p>
                <p>健康游戏公告：抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</p>
                
            </div>
        </div>
    </div>
</body>
<script src="../js/personal.js"></script>
</html>